<template>
  <div class="container">
      <p>流水列表</p>
      <el-table
        ref="multipleTable"
        :data="financeArr"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column
    prop="ordernum" 
    label="订单编号"
     width="190" align="center">
    </el-table-column>
    <el-table-column
      prop="ordersort"
      label="课程分类"
      width="160" align="center">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
       width="160" align="center"
      >
    </el-table-column>
     <el-table-column
      prop="money"
      label="订单金额"
       width="160" align="center"
      >
    </el-table-column>
     <el-table-column  label="订单状态" width="150" align="center"><template slot-scope="scope">{{ typeObj[scope.row.type] }}</template>
    </el-table-column>
     <el-table-column
      prop="time"
      label="订单时间"
       width="240" align="center"
      >
    </el-table-column>
    <el-table-column label="操作"  align="center">
      <template slot-scope="scope">
        <el-button
          type="warning"
          size="mini"
          @click="handleEdit(scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 
    
  </div>
</template>

<script>
import { delFinanceApi,batchFinanceApi } from '../../../api/financeApi'
export default {
    props:['financeArr'],
     data() {
      return {
          typeObj:{
              0:'待支付',
              1:'已关闭',
              2:'待确认',
              3:'学习中',
              4:'已完成'
          },
        // tableData: [{
        //   ordernum: '2019030102369669',
        //   ordersort: '课程订单',
        //   title: '幼儿英语课程',
        //   money:'¥500.00',
        //   type:'0',
        //   time:'2019-01-25 10:55'

        // }],
        multipleSelection: []
      }
    },

    methods: {
    //   toggleSelection(rows) {
    //     if (rows) {
    //       rows.forEach(row => {
    //         this.$refs.multipleTable.toggleRowSelection(row);
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 修改里面的删除事件
      handleDelete(id){
        delFinanceApi({id:id}).then(res=>{
          console.log('===',res);
          // 刷新表格
          this.$emit('delFinanceFun')
        })

      },
      batchFun(){
        console.log('批量删除成功');
        var ids = ''
        this.multipleSelection.forEach(item=>{
          ids += item.id + ','
        })
        batchFinanceApi({ids:ids}).then(res=>{
          console.log('++++',res);
           // 刷新表格
          this.$emit('delFinanceFun')
        })
      },
       //修改事件
        handleEdit(row) {
        console.log('row',row);
        this.$emit('parentShowFun',row)
        },
    }

}
</script>

<style lang="less" scoped>
.container{
    p{
        margin-left: 30px;
        margin-bottom: 18px;
    }
}

</style>